<template>
  <view class="main">
    <view class="subscribe-head">
      <view class="s1">
        预约信息
      </view>
      <view class="subscribe">
        <view>
          <view class="head-h1">
            {{obj.region}}
          </view>
          <view class="head-docname">
            医生姓名：{{obj.name}}
          </view>
        </view>
        <view v-if="times" class="dataText">
          <text style="color: #111;">预约时间：</text>{{times}}
        </view>
        <view>
          <view @tap="showCale" class="seleOrder">选择就诊日期</view>
        </view>

      </view>
    </view>

    <u-datetime-picker
        :show="show"
        ref="datetimePicker"
        mode="datetime"
        @confirm="closes">
    </u-datetime-picker>

    <view class="subscribe-body">
      <view class="s1">
        患者信息
      </view>
      <view class="subscribe">
        <view class="subscribe-one">
          <view class="subscribe-p">
            就诊人
          </view>
          <view class="subscribe-pname">
            {{usename}}
          </view>
        </view>
        <view>
          <view class="subscribe-p">
            身份码
          </view>
          <view class="subscribe-pname">
            {{obj.uphone | getxh}}
          </view>
        </view>
      </view>
    </view>
    <view class="subscribe-tag">
      <view class="s1">
        预约类型
      </view>
      <view class="subscribe">
        <text class="botton" @tap="changeOrd(index)" v-for="(value, index) in orderType" :class="(flag == index ? 'botton-click' : '')">
          {{value}}
          <text class="iconfont icon-duigou"></text>
        </text>
      </view>
      <view class="u-buttom">
        <u-button type="primary" text="确定" @tap="butToast"></u-button>
      </view>
      <u-toast ref="uToast2"></u-toast>
    </view>
  </view>
</template>

<script>
  export default {
		async onLoad(option) {
			this.obj = JSON.parse(option.info)

			let code = JSON.stringify("'" + uni.getStorageSync('openid') + "'")
			let {data: res} = await this.$http.get(`getUseInfo?phone=${code}`)
			console.log(res);
			this.usename = res.usename
		},
    data () {
      return {
        obj: {},
				usename: '',
        show: false, 
        orderType: ['随访', '拿药', '小病'], //预约种类
        flag: -1, //预约类型选择
        times: '', //存储时间
      }
    },
		filters: {
			getxh (item) {
				return Array.from(item).fill("*", 9, 15).join('')
			}
		},
    methods: {
      showCale: function () { //时间选择器控制
        this.show = true
      },
      changeOrd: function (i) { //预约类型选择
        this.flag = i
      },
      closes: function (e) { //选择时间
        if(Date.now()+30*59*1000 >= e.value) {
          this.$refs.uToast2.show({
            type: 'error',
            title: '默认主题',
            message: "预约时间距离不足半小时"
          })
        } else {
          this.times = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
          this.show = false
        }
      },
      butToast: function () {
				let arr = ['rbCTfVUauOLDw876Ww9n9UH360BhZYHEyG3ZNVDPv2A', '12313']
				let openid = uni.getStorageSync('openid') //获取保存的身份信息
				let that = this
				
        if(!this.times) {
          this.$refs.uToast2.show({
            type: 'error',
            title: '默认主题',
            message: "请选择预约时间"
          })
        } else if(this.flag == -1) {
          this.$refs.uToast2.show({
            type: 'error',
            title: '默认主题',
            message: "请选择预约类型"
          })
        } else {
					let code = JSON.stringify("'" + that.obj.uphone + "'")
					let arr2 = JSON.stringify("'" + arr + "'")
					
					uni.requestSubscribeMessage({
						tmplIds: arr,
						success(res) {
							that.$http.post(`/addOrder?phone=${code}&affair='${that.times}'&incidentName='${that.orderType[that.flag]}'&state='2'&template_id=${arr}`)
							.then(res => {
								if(res.data.affectedRows) {
									that.$refs.uToast2.show({
										type: 'default',
										title: '默认主题',
										message: "预约成功",
										url: '/pages/successfully/successfully',
										complete() {
											uni.redirectTo({
												url: '/pages/successfully/successfully'
											})
										}
									})
								}
							})
						},
						fail(res) {
							uni.showToast({
								title: '预约失败',
								icon : 'error',
								duration: 2000
							});
							console.log(res.errMsg);
						}
					})
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .charts-box {
    width: 100%;
    height: 300px;
  }

  .subscribe {
    padding: 30rpx 30rpx;
    .subscribe-one {
      padding-bottom: 20rpx;
      border-bottom: 1px solid rgba($color: #f1f1f1, $alpha: 1);
    }
    >view:nth-child(2) {
      padding-top: 20rpx;
    }
    .subscribe-p {
      display: inline-block;
      width: 140rpx;
      font-weight: 700;
    }
    .subscribe-pname {
      display: inline-block;
    }
    .dataText {
      color: #909399;
    }
    .seleOrder {
      margin-top: 10rpx;
      color: #0785FA;
    }
  }
  .u-buttom {
    margin-top: 30rpx;
  }
  .subscribe-head {
    .head-h1 {
      font-weight: 700;
      font-size: 32rpx;
      margin-bottom: 15rpx;
    }
    .head-docname {
      margin-bottom: 10rpx;
    }
  }
  .s1 {
    height: 80rpx;
    background-color: #f1f1f1;
    padding-left: 30rpx;
    line-height: 80rpx;
    color: #818181;
  }
  .subscribe-tag {
    .botton {
      display: inline-block;
      width: 120rpx;
      height: 50rpx;
      background-color: #fff;
      border: 2px solid rgba(#c1c1c1, .5);
      border-radius: 6rpx;
      text-align: center;
      line-height: 50rpx;
      font-size: 28rpx;
      margin: 10rpx;
    }
    .botton-click {
      position: relative;
      background: linear-gradient(320deg,#4C5CCB 18%,#EEF1FB 19%);
      background-repeat: no-repeat;
    }
    .icon-duigou {
      position: absolute;
      bottom: 2rpx;
      right: 2rpx;
      font-size: 16rpx;
      height: 30rpx;
    }
  }
</style>